<template>
    <!--搜索-->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="formData.id" placeholder="请输入ID编号" clearable />
        </el-form-item>
        <el-form-item label="类目名称">
            <el-input v-model="formData.cname" placeholder="请输入类目名称" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--列表-->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="90" />
        <el-table-column prop="cname" label="类目名" width="100" />
        <el-table-column prop="cimg" label="类目图片" width="120">
            <template #default="scope">
                <img :src="scope.row.cimg" alt="" width="60" height="60">
            </template>
        </el-table-column>
        <el-table-column prop="status" label="类目状态" width="90">
            <el-switch v-model="value" class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
        </el-table-column>

        <el-table-column prop="seq" label="优化排序" width="120" />
        <el-table-column prop="parentId" label="父目录ID" width="120" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button type="warning" size="small" @click="handleClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="officeClick(scope.row)">下线</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
        :page-sizes="[4, 10, 15, 20]" layout="total, sizes, prev, pager, next,jumper" :total="pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref, reactive } from 'vue';
// import axios from 'axios';
import { CategoryApi } from '../../api';
const tableData = ref([])
const value = ref(true)
const formData = reactive({
    id: '',
    cname: '',
    ids:[]
})
const pageData = reactive({
    total: 0,
    pageSize: 4,
    pageNum: 1
})

onMounted(() => { 
    categoryDataApi()

})

const categoryDataApi = () => {
    // let res = await axios.get('http://localhost:8081/api/category')
    //   tableData.value = res.data.data
    let id = formData.id == '' ? undefined : formData.id
    let cname = formData.cname == '' ? undefined : formData.cname
    CategoryApi.select.call({
        id: id, cname: cname,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
        
    }).then(res => { 
        console.log(res);
        // tableData.value=res
        tableData.value = res.items
        pageData.total = res.total
    })

}

const onSubmit = () => { 
    console.log('查询');
    categoryDataApi()
}
import { useRouter } from 'vue-router';
const router = useRouter()

const handleClick = (row) => {
    console.log('编辑', row.id)
    router.push({name:'categoryEdit',query:{id:row.id}})
}

const officeClick = (row) => { 
console.log("下线",row);
    ElMessageBox.confirm(
        '您是否要对'+ row.cname + '进行下线操作?',
        '警告！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            CategoryApi.delete.call({id:row.id}).then(res => { 
                console.log(res);

                ElMessage({
                    type: 'success',
                    message: row.cname + '下线成功，可在后台编辑上线',
                })
                
            })
            //回调函数 ，重新刷新数据
            categoryDataApi()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功，如需下线请重新选择',
            })
        })
}
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    pageData.pageSize = val
    categoryDataApi()
}
const handleCurrentChange = (val) => {
    pageData.pageNum = val
    categoryDataApi()
}
</script>

<style scoped>

</style>